<template>
  <div class="listLinkIndexMain">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7">
        <Feature :titleName="'友链格式'">
          <slot>
            <div class="linksTypeMain" style="min-height: 200px">
              <div>格式：【网站访问地址】+【网站名称】</div>
              <div>例如：【www.zylweb.top】+【我的个人日志】</div>
              <div>说明：友链互链可在本站【问题反馈】中留言，啥时候看到啥时候处理，一切随缘！</div>
            </div>
          </slot>
        </Feature>
      </el-col>
      <el-col :xs="24" :sm="17" :md="17" :lg="17" :xl="17">
        <Feature :titleName="'友链格式'">
          <slot>
            <div class="linksTypeMain">
              链接收录列表
            </div>
            <el-row :gutter="10">
              <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6" v-if="skeletonListType" v-for="item in 20" class="zylMB30">
                <el-skeleton :rows="2" animated class="zylMB30"/>
              </el-col>
              <template v-for="(item, index) in linkList">
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
                  <div class="linksMain zylTransition" @click="jump(item)">
                    <div class="linkLeft zylTransition">
                      <div class="linksNormal zylTransition" v-if="item.linktype === '正常'">{{ item.linktype }}</div>
                      <div class="linksAbnormal zylTransition" v-if="item.linktype === '异常'">{{ item.linktype }}</div>
                      <div class="linksInvalid zylTransition" v-if="item.linktype === '失效'">{{ item.linktype }}</div>
                    </div>
                    <div class="linkRight zylTransition">
                      <div class="linkTitle zylSpace zylTransition">{{ item.title }}</div>
                      <div class="zylDescribe">{{ item.creationtime }}</div>
                      <div class="linkText zylDescribe zylSpace">简介：{{ item.brief }}</div>
                      <div class="linkText zylDescribe zylSpace">地址：{{ item.linkurl }}</div>
                    </div>
                  </div>
                </el-col>
              </template>
            </el-row>
          </slot>
        </Feature>
        <div class="zylPaginationMain zylMB10">
          <el-pagination background :total="pagList.total" :page-size="pagList.pageSize" @current-change="handlePageChange" layout="prev, pager, next"></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import '@/assets/scss/index.scss';
import Feature from '@/components/Feature';
import Interface from './serve/api';
export default {
  // 友情链接
  name: 'linkIndex',
  components: {
    Feature,
  },
  data () {
    return {
      linkList: [],
      // 分页
      pagList: {
        total: 0,
        pageNum: 1,
        pageSize: 20,
      },
      skeletonListType: true,
    }
  },
  mounted () {
    this.getZylLinkState();
  },
  methods: {
    // 友情链接列表
    getZylLinkState () {
      let params = {
        state: '是',
        pageNum: this.pagList.pageNum,
        pageSize: this.pagList.pageSize,
      };
      Interface.getZylLinkState(params).then(res => {
        if (res.status === 200) {
          this.skeletonListType = false;
          this.linkList = res.data.list;
          this.pagList.total = res.data.total;
        };
      })
    },

    // 分页监听
    handlePageChange (val) {
      this.pagList.pageNum = val;
      this.getZylLinkState();
    },

    // 跳转
    jump (item) {
      window.open(item.linkurl, '_blank');
    },
  },
}
</script>
